<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>公告信息</title>
    <link href="/front/css/bootstrap.min.css" rel="stylesheet">
    <link href="/front/css/my.css" rel="stylesheet">
    <link href="/front/css/nav.css" rel="stylesheet">

    <style>
        #notice-box li {
            margin-bottom: 10px;
        }
        #view-notice-body img {
            width: 400px;
        }
        #view-notice-body iframe {
            width: 400px;
        }
    </style>
</head>
<body>

<div class="nav-container-header">
    <div class="container" style="height: 100%">
        <div class="row" style="height: 100%">
            <div class="col-md-3"><img class="logo-img" src="/front/img/logo.png" alt="">
                <div class="logo">公交查询系统</div>
            </div>
            <div class="col-md-7"><img class="header-img" src="/front/img/carousel/7.jpg" alt=""></div>
        </div>
    </div>
</div>
<div class="nav-container">
    <ul class="nav-item-box">
        <li><a class="nav-item" href="index.html">首页</a></li>
        <li><a class="nav-item active" href="advertiserInfo.html">公告信息</a></li>
			<li><a class="nav-item" href="pathInfo.html">公交车路线信息</a></li>
			<li><a class="nav-item" href="messageInfo.html">留言信息</a></li>

        <li><a class="nav-item" href="/end/page/index.html" target="_blank">进入后台系统</a></li>
    </ul>
    <div class="nav-right">
        <a class="nav-item" href="/end/page/login.html" target="_blank">登录</a>
        <a class="nav-item" href="/end/page/register.html" target="_blank">注册</a>
    </div>
</div>
<!-- /.  导航栏-->

<div class="container" style="margin-top: 10px">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <b id="view-notice-title"></b>
                    <span style="float: right; color: #888888" id="view-notice-time"></span>
                </div>
                <div class="panel-body" id="view-notice-body">

                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default" id="notice-box">
                <div class="panel-heading"><b>公告列表</b></div>
                <div class="panel-body">
                    <ul id="notice-item-box">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--js库文件-->
<script src="js/jquery-1.10.2.js"></script>


<script>
    $(function () {
        $.get('/advertiserInfo/page/all?pageSize=10', function (res) {
            if (res.code === '0') {
                let itemList = res.data.list;
                let id = getQueryVariable('id');
                if(!id) {
                    id = res.data.list[0].id;
                }
                let $box = $("#notice-item-box");
                $box.empty();
                for (let item of itemList) {
                    let $item = $(`<li><a href="advertiserInfo.html?id=${item.id}">${item.name}</a></li>`);
                    if(parseInt(id) === item.id) {  // 当前选择的公告
                        $item.find('a').addClass('active');
                        // 当前展示的公告信息
                        $('#view-notice-title').text(item.name);
                        $('#view-notice-time').text(item.time);
                        $('#view-notice-body').html(item.content);
                    }
                    $box.append($item);
                }
            }
        })
    });

    /**
     * 获取url指定参数
     * @param variable
     * @returns {string|boolean}
     */
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return '';
    }
</script>
</body>
</html>